{% set menu_level = 0 %}

{% import _self as menus %}

{% macro dropdown_menu(items, menu_level) %}
  {% import _self as menus %}
  {% set container_classes = ([
    'submenu lg:border',
    menu_level == 1 ? 'lg:absolute lg:pt-2' : 'lg:absolute lg:top-0',
  ] | sort | join(' ') | trim ) %}

  {% set link_classes = ([
    'flex lg:px-7 py-4',
    menu_level >= 1 ? 'lg:hover:text-black lg:hover:bg-yellow-300 border-b w-full block cursor-pointer lg:flex lg:space-x-15 px-7 lg:px-2 lg:py-3 hidden',
  ] | sort | join(' ') | trim ) %}

  <div class="{{ container_classes }}"
       :class="{'block lg:hidden': submenuIsOpen, 'hidden': !submenuIsOpen, {% if menu_level > 1 %} 'lg:left-full': submenuDirection == 'right', 'lg:right-full': submenuDirection == 'left' {% endif %} }"
       data-menu="submenu">
    <div {{ menu_level == 2 ? 'class="lg:flex"' }}>
      {% set row_numbers = items|length/2 %}
      {% for row in items|batch(menu_level == 2 ? row_numbers : 100) %}
        <ul>
          {% for item in row %}
            <li
              {% if item.below %} x-data="Drupal.behaviors.wingsuitMenu()"
              @mouseenter="processed = true;submenuDirection=getSubmenuDirection($el);"
              @mouseleave="processed = false"
              {% endif %}
              :class="{ 'menu-processed' : processed == true }" data-menu-target="submenu"
              data-menu-level="{{ menu_level }}">
              <div class="{{ link_classes }}">
                <a href="{{ item.url }}" class="flex-1">
                  {{ item.title }}
                </a>
                {% if item.below %}
                  <div
                    class=" {{
                      menu_level == 1
                        ? 'float-right center-origin transition duration-100 ease-in lg:-rotate-90 lg:px-3'
                        : 'float-right lg:hidden center-origin transition duration-100 ease-in'
                    }} cursor-pointer"
                    {% if item.below %} @click="submenuIsOpen = !submenuIsOpen;" {% endif %}
                    :class="{'rotate-180': submenuIsOpen, 'rotate-0': !submenuIsOpen}"
                  >
                    {{ menus.dropdown_menu(menu_level) }}
                  </div>
                {% endif %}
              </div>
              {% if item.below %}
                {{ menus.dropdown_menu(item.below, menu_level + 1) }}
              {% endif %}
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </div>
  </div>
{% endmacro %}

{% set list_classes = ([
  'lg:flex lg:justify-end lg:space-x-7 lg:items-center xl:space-x-11 2xl:space-x-15'
] | sort | join(' ') | trim ) %}

<ul class="{{ list_classes }}">
  {% for item in items %}
    {% set link_classes = ([
      'font-bold w-full block cursor-pointer lg:inline-block',
    ] | sort | join(' ') | trim ) %}
    <li {% if item.below %}
      x-data="Drupal.behaviors.wingsuitMenu()"
      data-menu-target="submenu" {% endif %} data-menu-level="{{ menu_level }}">
      <div class="flex border-b lg:border-0 px-7 lg:px-0 py-4 lg:py-0">
        <a href="{{ item.url }}" class="{{ link_classes }}">
          {{ item.title }}
        </a>
        {% if item.below %}
          <div
            class="{{
              menu_level == 1
                ? 'float-right center-origin transition duration-100 ease-in lg:-rotate-90 lg:px-3'
                : 'float-right lg:hidden center-origin transition duration-100 ease-in'
            }} cursor-pointer"
            {% if item.below %} @click="submenuIsOpen = !submenuIsOpen;" {% endif %}
            :class="{'rotate-180': submenuIsOpen, 'rotate-0': !submenuIsOpen}"
          >
            {% include "@atoms/svg/_svg--icon.twig" with {
              size: 'small',
              icon: 'sort-down'
            } only %}
          </div>
        {% endif %}
      </div>
      {% if item.below %}
        {{ menus.dropdown_menu(item.below, menu_level + 1) }}
      {% endif %}
    </li>
  {% endfor %}
</ul>

